package com.zy.composeworld.demo.demo1.screens

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Notifications
import androidx.compose.material.icons.filled.Place
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.Icon
import androidx.compose.material3.LeadingIconTab
import androidx.compose.material3.Surface
import androidx.compose.material3.Tab
import androidx.compose.material3.TabRow
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.zy.composeworld.demo.demo1.components.TopAppBar
import com.zy.composeworld.demo.demo1.viewmodel.Demo1ViewModel

@Composable
fun HomeScreen(vm: Demo1ViewModel = viewModel()) {
    Column {
        //标题栏
        TopAppBar(modifier = Modifier.padding(horizontal = 16.dp)) {
            Surface(
                modifier = Modifier
                    .clip(RoundedCornerShape(16.dp))
                    .weight(1f),
                color = Color(0x33ffffff)
            ) {
                Row(
                    modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Icon(
                        Icons.Filled.Search,
                        contentDescription = "",
                        tint = Color.White,
                        modifier = Modifier.size(15.dp)
                    )
                    Text(
                        text = "搜索感兴趣的咨询或课程",
                        color = Color.White,
                        fontSize = 12.sp,
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                }
            }

            Text(
                text = "学习\n进度",
                color = Color.White,
                fontSize = 10.sp,
            )

            Text(
                text = "26%",
                color = Color.White,
                fontSize = 12.sp,
            )


            Icon(
                Icons.Filled.Notifications,
                contentDescription = "",
                tint = Color.White,
                modifier = Modifier.size(15.dp)
            )
        }

        //分类标签
        TabRow(
            selectedTabIndex = vm.categoryIndex,
            containerColor = Color(0x66149ee7)
        ) {
            vm.categories.forEachIndexed { index, category ->
                Tab(
                    selected = vm.categoryIndex == index,
                    onClick = {
                        vm.updateCategoryIndex(index)
                    },
                    selectedContentColor = Color(0xff149ee7),
                    unselectedContentColor = Color(0xff666666)
                ) {
                    Text(
                        text = category.title,
                        modifier = Modifier.padding(vertical = 8.dp), fontSize = 14.sp
                    )
                }
            }
        }


        //类型
        TabRow(
            selectedTabIndex = vm.typeIndex,
            containerColor = Color.Transparent
        ) {
            vm.types.forEachIndexed { index, type ->
                Tab(
                    selected = vm.typeIndex == index,
                    onClick = {
                        vm.updateTypeIndex(index)
                    },
                    selectedContentColor = Color(0xff149ee7),
                    unselectedContentColor = Color(0xff666666)
                ) {
                    Text(
                        text = type.title,
                        modifier = Modifier.padding(vertical = 8.dp), fontSize = 16.sp
                    )
                }
            }
        }


        TabRow(
            selectedTabIndex = vm.typeIndex,
            containerColor = Color.Transparent
        ) {
            vm.types.forEachIndexed { index, type ->
                LeadingIconTab(
                    selected = vm.typeIndex == index,
                    onClick = {
                        vm.updateTypeIndex(index)
                    },
                    selectedContentColor = Color(0xff149ee7),
                    unselectedContentColor = Color(0xff666666),
                    text = {
                        Text(
                            text = type.title,
                            modifier = Modifier.padding(vertical = 8.dp), fontSize = 16.sp
                        )
                    }, icon = {
                        Icon(type.icon, contentDescription = "")
                    }
                )
            }
        }


        //轮播图






        Text(text = "Home=$vm")

    }

}


@Preview
@Composable
fun MainHomeScreen() {
    HomeScreen()
}